<template>
	<view class="container">
		<view class="header">
			<text class="title">简单测试页面</text>
		</view>
		
		<view class="content">
			<text class="info">用户信息: {{ userInfo.username || '未登录' }}</text>
			<text class="info">角色: {{ userInfo.roles ? userInfo.roles.join(', ') : '无' }}</text>
			<text class="info">菜单项数量: {{ menuItems.length }}</text>
		</view>
		
		<view class="actions">
			<button @click="loadData">加载数据</button>
			<button @click="goBack">返回</button>
		</view>
		
		<view class="menu-list" v-if="menuItems.length > 0">
			<view class="menu-item" v-for="item in menuItems" :key="item.key">
				<text>{{ item.icon }} {{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import permissionManager from '@/utils/permission.js'
	
	export default {
		data() {
			return {
				userInfo: {},
				menuItems: []
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				console.log('开始加载数据...');
				
				// 加载用户信息
				const { getUserInfo } = require('@/utils/auth');
				this.userInfo = getUserInfo() || {};
				console.log('用户信息:', this.userInfo);
				
				// 设置权限管理器
				if (this.userInfo && Object.keys(this.userInfo).length > 0) {
					permissionManager.setUserInfo(this.userInfo);
					console.log('权限管理器已设置用户信息');
				}
				
				// 获取菜单项
				this.menuItems = permissionManager.getMenuItems();
				console.log('菜单项:', this.menuItems);
				
				uni.showToast({
					title: '数据加载完成',
					icon: 'success'
				});
			},
			
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.content {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.info {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}
	
	.actions {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.actions button {
		flex: 1;
		height: 80rpx;
		background-color: #409EFF;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.menu-list {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
	}
	
	.menu-item {
		padding: 16rpx;
		margin-bottom: 12rpx;
		background-color: #e3f2fd;
		border-radius: 8rpx;
	}
	
	.menu-item text {
		font-size: 24rpx;
		color: #1976d2;
	}
</style>
